// 获取焦点图总个数
var img_length = document.querySelectorAll(".focus_items li").length;
// 将ul父盒子的长度自动更新
document.querySelector(".focus_items").style.width = img_length * 721 + "px";
// 获取所有的导航li
var img_list = document.querySelector(".img_list");
// 根据图片个数更新导航个数方法
var img_list_create_li = function() {
  let li = document.createElement("li");
  img_list.appendChild(li);
};
var focus = document.querySelector(".focus");
focus.onmouseenter = function() {
    document.querySelector(".focus .onleft").style.opacity = 1.0;
    document.querySelector(".focus .onright").style.opacity = 1.0;
};
focus.onmouseleave = function() {
    document.querySelector(".focus .onleft").style.opacity = 0.2;
    document.querySelector(".focus .onright").style.opacity = 0.2;
};
// 根据图片个数更新导航个数渲染
for (let i = 1; i < img_length; i++) {
  img_list_create_li();
}

document.querySelector(".focus .onleft i").onclick = function() {
    img_scroll_left();
};
document.querySelector(".focus .onright i").onclick = function() {
    img_scroll_right();
};

// 给小导航绑定事件
var focus_items = document.querySelector(".focus_items");
console.log(focus_items);

// 滚动模块开始

var img_index = 1;
var img_timer;
var tmp = 0;
var noleft = true;
var img_scroll_left = function(){
    if(img_index == 1){
        console.log("到顶了")
        return false;
    }else {
        if(noleft){
            noleft = !noleft;
            let i = 0;
            img_timer = setInterval(function(){
                if(!(i<103)){
                    img_index--;
                    noleft = !noleft;
                    clearInterval(img_timer);
                }else {
                    i++;
                    tmp+=7;
                    focus_items.style.left = tmp + "px";
                }
            },2);
        }
    }
}
var img_scroll_right = function(){
    clearInterval(img_timer);
    if(img_index >= img_length){
        return false;
    }else {
        img_timer = setInterval(function(){
            if(tmp<=-(img_index*721)){
                img_index++;
                console.log("此时tmp的值:"+tmp);
                console.log("此时img_index的值:"+img_index);
                clearInterval(img_timer);
            }else {
                tmp-=7;
                focus_items.style.left = tmp + "px";          
            }
        },2);
    }
}

// 滚动模块结束

var drop_lis = document.querySelectorAll(".dd li");
var moredrop = document.querySelector(".moredrop");
for(let i = 0; i <drop_lis.length; i++){
    drop_lis[i].onmouseenter = function(){
        moredrop.className = "moredrop";
        moredrop.onmouseenter = function(){
            moredrop.className = "moredrop";
        }
        moredrop.onmouseleave = function(){
            moredrop.className = "moredrop nonedisplay";
            moredrop.innerHTML="";
        }
    }
    drop_lis[i].onmouseleave = function(){
        moredrop.className = "moredrop nonedisplay";
    }
}


    drop_lis[0].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#">电冰箱</a>
        <a href="#" class="blue">微波炉</a>
    </p>
    <p>
        <a href="#">烤箱</a>
        <a href="#">密码机</a>
        <a href="#">机顶盒</a>
        <a href="#">长寿面</a>
        <a href="#">爱腾讯</a>
    </p>
    <p>
        <a href="#">就接机</a>
        <a href="#">微波炉</a>
        <a href="#" class="orange">大耳朵图图</a>
        <a href="#" class="blue">微波炉</a>
    </p>
    <p>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
        <a href="#">自行车</a>
        <a href="#">一根葱</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
    drop_lis[1].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#" class="purple">万圣节</a>
        <a href="#">窗帘</a>
    </p>
    <p>
        <a href="#">QQ音乐</a>
        <a href="#">酷我音乐</a>
        <a href="#">爱上音乐</a>
        <a href="#">智慧键盘</a>
        <a href="#">轻松鼠标</a>
        <a href="#">魔法机箱</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
    </p>
    <p>
        <a href="#">密码机</a>
        <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
        <a href="#">一根葱</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
    drop_lis[2].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#" class="red">端午节</a>
        <a href="#">旗袍</a>
        <a href="#">斗鱼TV</a>
        <a href="#">香蕉汉堡</a>
    </p>
    <p>
    <a href="#">酷我音乐</a>
        <a href="#">QQ音乐</a>
        <a href="#" class="red">轻松鼠标</a>
        <a href="#">智慧键盘</a>
        <a href="#">魔法机箱</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
        <a href="#" class="blue">癞蛤蟆</a>
    </p>
    <p>
    <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#">一根葱</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
        <a href="#" class="blue">癞蛤蟆</a>
    </p>
    <p>
    <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#">一根葱</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
    drop_lis[3].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#">电冰箱</a>
        <a href="#" class="blue">微波炉</a>
    </p>
    <p>
        <a href="#">烤箱</a>
        <a href="#">密码机</a>
        <a href="#">机顶盒</a>
        <a href="#">长寿面</a>
        <a href="#">爱腾讯</a>
    </p>
    <p>
        <a href="#">就接机</a>
        <a href="#">微波炉</a>
        <a href="#" class="orange">大耳朵图图</a>
        <a href="#" class="blue">微波炉</a>
    </p>
    <p>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
        <a href="#">自行车</a>
        <a href="#">一根葱</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
    drop_lis[4].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#" class="purple">万圣节</a>
        <a href="#">窗帘</a>
    </p>
    <p>
        <a href="#">QQ音乐</a>
        <a href="#">酷我音乐</a>
        <a href="#">爱上音乐</a>
        <a href="#">智慧键盘</a>
        <a href="#">轻松鼠标</a>
        <a href="#">魔法机箱</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
    </p>
    <p>
        <a href="#">密码机</a>
        <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
        <a href="#">一根葱</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
    drop_lis[5].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#" class="red">端午节</a>
        <a href="#">旗袍</a>
        <a href="#">斗鱼TV</a>
        <a href="#">香蕉汉堡</a>
    </p>
    <p>
    <a href="#">酷我音乐</a>
        <a href="#">QQ音乐</a>
        <a href="#" class="red">轻松鼠标</a>
        <a href="#">智慧键盘</a>
        <a href="#">魔法机箱</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
        <a href="#" class="blue">癞蛤蟆</a>
    </p>
    <p>
    <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#">一根葱</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
        <a href="#" class="blue">癞蛤蟆</a>
    </p>
    <p>
    <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#">一根葱</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
    drop_lis[6].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#">电冰箱</a>
        <a href="#" class="blue">微波炉</a>
    </p>
    <p>
        <a href="#">烤箱</a>
        <a href="#">密码机</a>
        <a href="#">机顶盒</a>
        <a href="#">长寿面</a>
        <a href="#">爱腾讯</a>
    </p>
    <p>
        <a href="#">就接机</a>
        <a href="#">微波炉</a>
        <a href="#" class="orange">大耳朵图图</a>
        <a href="#" class="blue">微波炉</a>
    </p>
    <p>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
        <a href="#">自行车</a>
        <a href="#">一根葱</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
    drop_lis[7].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#" class="purple">万圣节</a>
        <a href="#">窗帘</a>
    </p>
    <p>
        <a href="#">QQ音乐</a>
        <a href="#">酷我音乐</a>
        <a href="#">爱上音乐</a>
        <a href="#">智慧键盘</a>
        <a href="#">轻松鼠标</a>
        <a href="#">魔法机箱</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
    </p>
    <p>
        <a href="#">密码机</a>
        <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
        <a href="#">一根葱</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
    drop_lis[8].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#" class="red">端午节</a>
        <a href="#">旗袍</a>
        <a href="#">斗鱼TV</a>
        <a href="#">香蕉汉堡</a>
    </p>
    <p>
    <a href="#">酷我音乐</a>
        <a href="#">QQ音乐</a>
        <a href="#" class="red">轻松鼠标</a>
        <a href="#">智慧键盘</a>
        <a href="#">魔法机箱</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
        <a href="#" class="blue">癞蛤蟆</a>
    </p>
    <p>
    <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#">一根葱</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
        <a href="#" class="blue">癞蛤蟆</a>
    </p>
    <p>
    <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#">一根葱</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
    drop_lis[9].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#">电冰箱</a>
        <a href="#" class="blue">微波炉</a>
    </p>
    <p>
        <a href="#">烤箱</a>
        <a href="#">密码机</a>
        <a href="#">机顶盒</a>
        <a href="#">长寿面</a>
        <a href="#">爱腾讯</a>
    </p>
    <p>
        <a href="#">就接机</a>
        <a href="#">微波炉</a>
        <a href="#" class="orange">大耳朵图图</a>
        <a href="#" class="blue">微波炉</a>
    </p>
    <p>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
        <a href="#">自行车</a>
        <a href="#">一根葱</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
    drop_lis[10].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#" class="purple">万圣节</a>
        <a href="#">窗帘</a>
    </p>
    <p>
        <a href="#">QQ音乐</a>
        <a href="#">酷我音乐</a>
        <a href="#">爱上音乐</a>
        <a href="#">智慧键盘</a>
        <a href="#">轻松鼠标</a>
        <a href="#">魔法机箱</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
    </p>
    <p>
        <a href="#">密码机</a>
        <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
        <a href="#">一根葱</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
    drop_lis[11].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#" class="red">端午节</a>
        <a href="#">旗袍</a>
        <a href="#">斗鱼TV</a>
        <a href="#">香蕉汉堡</a>
    </p>
    <p>
    <a href="#">酷我音乐</a>
        <a href="#">QQ音乐</a>
        <a href="#" class="red">轻松鼠标</a>
        <a href="#">智慧键盘</a>
        <a href="#">魔法机箱</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
        <a href="#" class="blue">癞蛤蟆</a>
    </p>
    <p>
    <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#">一根葱</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
        <a href="#" class="blue">癞蛤蟆</a>
    </p>
    <p>
    <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#">一根葱</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
    drop_lis[12].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#">电冰箱</a>
        <a href="#" class="blue">微波炉</a>
    </p>
    <p>
        <a href="#">烤箱</a>
        <a href="#">密码机</a>
        <a href="#">机顶盒</a>
        <a href="#">长寿面</a>
        <a href="#">爱腾讯</a>
    </p>
    <p>
        <a href="#">就接机</a>
        <a href="#">微波炉</a>
        <a href="#" class="orange">大耳朵图图</a>
        <a href="#" class="blue">微波炉</a>
    </p>
    <p>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
        <a href="#">自行车</a>
        <a href="#">一根葱</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
    drop_lis[13].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#" class="purple">万圣节</a>
        <a href="#">窗帘</a>
    </p>
    <p>
        <a href="#">QQ音乐</a>
        <a href="#">酷我音乐</a>
        <a href="#">爱上音乐</a>
        <a href="#">智慧键盘</a>
        <a href="#">轻松鼠标</a>
        <a href="#">魔法机箱</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
    </p>
    <p>
        <a href="#">密码机</a>
        <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
        <a href="#">一根葱</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
    drop_lis[14].addEventListener('mouseenter',function(){
        moredrop.innerHTML=
        `
        <p>
        <a href="#" class="red">端午节</a>
        <a href="#">旗袍</a>
        <a href="#">斗鱼TV</a>
        <a href="#">香蕉汉堡</a>
    </p>
    <p>
    <a href="#">酷我音乐</a>
        <a href="#">QQ音乐</a>
        <a href="#" class="red">轻松鼠标</a>
        <a href="#">智慧键盘</a>
        <a href="#">魔法机箱</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
        <a href="#" class="blue">癞蛤蟆</a>
    </p>
    <p>
    <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#">一根葱</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>
    <p>
        <a href="#">Ctrl</a>
        <a href="#" class"blue">可爱的显示屏</a>
        <a href="#" class="orange">佐助</a>
        <a href="#" class="blue">名人</a>
        <a href="#" class="blue">癞蛤蟆</a>
    </p>
    <p>
    <a href="#">自行车</a>
        <a href="#">密码机</a>
        <a href="#">一根葱</a>
        <a href="#">密码机</a>
        <a href="#" class="hotpink">甜甜圈</a>
    </p>
    <p>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
        <a href="#" class="purple">记得爱ciuciu</a>
        <a href="#">记得常笑</a>
        <a href="#">记得常笑</a>
    </p>`
    }
    );
